<template>
    <div class="plugin-configuration page-container">
        <el-row class="plugin-configuration_row header">
            <span class="text">插件配置</span>
        </el-row>
        <el-row class="plugin-configuration_row plugin-configuration__device-info">
            <el-card class="box-card">
                <el-row class="card-content" type="flex">
                    <i class="el-icon-setting"></i>
                    <div class="info-wrap">
                        <div class="info-wrap__row name"><span class="col-key">产品名称：</span><span class="col-value">BS5005W</span>
                        </div>
                        <div class="info-wrap__row"><span class="col-key">产品型号码：</span><span class="col-value">BS5005W</span>
                        </div>
                        <div class="info-wrap__row"><span class="col-key">产品型本号：</span><span class="col-value">BS5005W</span>
                        </div>
                    </div>
                </el-row>
            </el-card>
        </el-row>
        <el-row class="plugin-configuration_row plugin-configuration__nav-menu">
            <el-menu default-active="plugin-configuration" class="el-menu" mode="horizontal">
                <el-menu-item index="device-info">产品信息</el-menu-item>
                <el-menu-item index="plugin-configuration">插件配置</el-menu-item>
                <el-menu-item index="cloud-recipe">云菜谱</el-menu-item>
            </el-menu>
        </el-row>
        <el-row class="plugin-configuration_row plugin-configuration__device-background-image">
            <el-card class="box-card">
                <el-row type="flex" justify="space-between" align="middle" slot="header">
                    <span class="title">设备背景图</span>
                </el-row>
                <div class="card-content">
                    <TableSimple :tableData="tableData"/>
                    <el-pagination
                            background
                            :current-page.sync="currentPage"
                            :page-size="100"
                            layout="prev, pager, next, jumper"
                            :total="1000">
                    </el-pagination>
                </div>
            </el-card>
        </el-row>
        <el-row class="plugin-configuration_row plugin-configuration__device-background-image">
            <el-card class="box-card">
                <el-row type="flex" justify="space-between" align="middle" slot="header">
                    <span class="title">设备页显示组合</span>
                </el-row>
                <div class="card-content">
                    <TableSimple :tableData="tableData"/>
                    <el-pagination
                            background
                            :current-page.sync="currentPage"
                            :page-size="100"
                            layout="prev, pager, next, jumper"
                            :total="1000">
                    </el-pagination>
                </div>
            </el-card>
        </el-row>
        <el-row class="plugin-configuration_row plugin-configuration__device-background-image">
            <el-card class="box-card">
                <el-row type="flex" justify="space-between" align="middle" slot="header">
                    <span class="title">设备页模式</span>
                </el-row>
                <div class="card-content">
                    <TableSimple :tableData="tableData"/>
                    <el-pagination
                            background
                            :current-page.sync="currentPage"
                            :page-size="100"
                            layout="prev, pager, next, jumper"
                            :total="1000">
                    </el-pagination>
                </div>
            </el-card>
        </el-row>
    </div>
</template>

<script>
import TableSimple from '@/views//modules/user-data/table-simple'
// import ChartKeyIndicator from './chart-key-indicator'
export default {
  name: 'AppTrendHistory',
  components: { TableSimple },
  data () {
    return {
      dateRange: '1',
      tableData: {
        column: [
          {
            label: '时间',
            prop: 'date'
          },
          {
            label: '浏览量PV',
            prop: 'pv'
          },
          {
            label: '独立用户UV',
            prop: 'uv'
          },
          {
            label: '访问次数VV',
            prop: 'vv'
          },
          {
            label: '独立IP',
            prop: 'ip'
          },
          {
            label: '跳出率',
            prop: 'out'
          },
          {
            label: '平均在线时长',
            prop: 'online'
          }
        ],
        data: [
          {
            date: '2016-05-02',
            pv: '王小虎',
            uv: '王小虎',
            vv: '114',
            out: '王小虎',
            online: '王小虎',
            ip: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-02',
            pv: '王小虎',
            uv: '王小虎',
            vv: '114',
            out: '王小虎',
            online: '王小虎',
            ip: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-02',
            pv: '王小虎',
            uv: '王小虎',
            vv: '114',
            out: '王小虎',
            online: '王小虎',
            ip: '上海市普陀区金沙江路 1518 弄'
          }
        ]
      },
      currentPage: 1
    }
  }
}
</script>

<style lang="scss" scoped>
    @import "~element-theme-chalk/src/common/var.scss";
    @import "@/assets/scss/modules/variables-module.scss";
    @import "@/assets/scss/modules/common-module.scss";

    .page-container {
        .header {
            font-size: 150%;

            .text {
                font-weight: bold;
            }

            .el-icon-question {
                margin-left: $gap-default;
                color: $--color-text-placeholder;
            }
        }

        .plugin-configuration_row {
            & ~ .plugin-configuration_row {
                margin-top: $gap-big;
            }

            .box-card {
                & + .box-card {
                    margin-top: 0;
                    margin-left: $gap-default;
                }

                .title {
                    font-weight: bolder;
                    font-size: 145%;
                }
            }
        }

        .plugin-configuration_row--filter {
            @include filter-row;
        }

        .plugin-configuration__device-info {
            .el-icon-setting {
                font-size: 800%;
            }
            .info-wrap {
                display: flex;
                flex-flow: column;
                justify-content: space-between;
                margin-left: $gap-big;
                .info-wrap__row {
                    font-size: 110%;
                    &.name {
                        font-weight: bold;
                        font-size: 120%;
                    }
                }
            }
        }

        .plugin-configuration__nav-menu {
            .el-menu {
                ::v-deep {
                    .el-menu-item {
                        font-size: 110%;
                        font-weight: bold;
                    }
                }
            }
        }
    }
</style>
